<template>
  <div class="fill-box">
    <div class="fill-header">问卷填写</div>
    <div class="fill-main">
      <el-scrollbar>
        <el-form :model="form" :rules="formRules" ref="formRef" label-width="160px" label-position="left" size="large" style="width: 60%;">
          <el-form-item label="问卷形式" prop="wjxs">
            <el-checkbox-group v-model="form.wjxs">
              <el-checkbox value="1" name="type">选择项</el-checkbox>
              <el-checkbox value="2" name="type">文本项</el-checkbox>
              <el-checkbox value="3" name="type">上传项</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否必填项" prop="sfbt">
            <el-radio-group v-model="form.sfbt">
              <el-radio value="1">是</el-radio>
              <el-radio value="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="问卷题目" prop="wjtm">
            <el-input v-model="form.wjtm" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="问卷标签">
            <el-select v-model="form.wjbq" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="答案选项" prop="daxx">
            <el-checkbox-group v-model="form.daxx">
              <el-checkbox value="1" name="type">普通文本框</el-checkbox>
              <el-checkbox value="2" name="type">大文本框</el-checkbox>
              <el-checkbox value="3" name="type">数字文本框</el-checkbox>
              <el-checkbox value="4" name="type">日期时间段</el-checkbox>
              <el-checkbox value="5" name="type">日期+时间文本框</el-checkbox>
              <el-checkbox value="6" name="type">日期+时间段文本框</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="答案标签" prop="dabq">
            <el-select v-model="form.dabq" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
          <el-form-item label="显示顺序" prop="xssx">
            <el-input v-model="form.xssx" type="number" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <el-form-item>
          <div class="footer-btns">
            <div @click="back">返回</div>
            <div @click="save">提交信息</div>
            <div @click="saveAndNext">保存并继续</div>
          </div>
        </el-form-item>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {validatePositiveInteger} from "@/utils/validate";
import type { FormInstance } from 'element-plus'
import {useRouter} from "vue-router";

const router = useRouter();
const form = ref({
  wjxs: [],
  sfbt: '',
  wjtm: '',
  wjbq: '',
  daxx: [],
  dabq: '',
  xssx: 0
})
const formRules = {
  wjxs: {required: true, message: '请选择', trigger: 'blur'},
  sfbt:{required: true, message: '请选择', trigger: 'blur'},
  wjtm: {required: true, message: '请输入', trigger: 'blur'},
  daxx: {required: true, message: '请选择', trigger: 'blur'},
  xssx: {required: false, validator: validatePositiveInteger, type: 'blur'}
}
const formRef = ref<FormInstance>()


function back() {
  router.push({
    name: 'recordDetail',
    query: {
      id: '2024-05-02',
      tab: 2
    }
  })
}

function save() {
  // formRef.value.validate((valid) => {
  //   if (valid) {
  //     console.log('valid')
  //   }
  // })
}

function saveAndNext() {
  router.push({
    name: 'questionFillTwo',
    query: {
      id: '123'
    }
  })
}

defineComponent({name: 'QuestionFillOne'})
</script>

<style scoped lang="scss">
.fill-box {
  width: 100%;
  height: calc(100% - 70px);
}

.fill-header {
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
  padding-left: 30px;
  color: #2E3244;
  font-size: 34px;
  font-weight: 700;
  line-height: 80px;
  background: #fff;
}

.fill-main {
  width: 100%;
  height: calc(100% - 70px);
  padding: 48px 30px;
  background-color: #fff;
}

.footer-btns {
  width: 60%;
  margin-top: 80px;
  display: flex;
  justify-content: center;

  div {
    width: 120px;
    height: 46px;
    margin-right: 30px;
    color: #FF4350;
    text-align: center;
    line-height: 46px;
    border-radius: 10px;
    border: 1px solid #FF4350;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
      color: #fff;
      background: #FF4350;
    }
  }
}
</style>
